<template>
  <a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">
    <a-form-item>
      <!--antd中默认值不再使用defaultValue，而使用下方的initialValue -->
      <a-tooltip placement="left" title="请输入用户名">
        <a-input v-decorator="[
          'userName',
          {
            rules: [{ required: true, message: 'Please input your username!' }],
            initialValue:'user'
          }
        ]" placeholder="用户名">
          <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
        </a-input>
      </a-tooltip>
    </a-form-item>
    <a-form-item>
      <a-tooltip placement="left" title="请输入密码">
        <a-input v-decorator="[
            'password',
            {
              rules: [{ required: true, message: 'Please input your Password!' }],
              initialValue:'123456'
            }
          ]" type="password" placeholder="密码" initialValue="123456">
          <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
        </a-input>
      </a-tooltip>
    </a-form-item>
    <a-form-item>
      <a-checkbox v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]">
        Remember me
      </a-checkbox>
      <!-- <a class="login-form-forgot" href=""> Forgot password </a> -->
      <a-button type="primary" html-type="submit" class="login-form-button">
        Log in
      </a-button>
      Or
      <a @click="showRegister"> register now! </a>
      <a-modal title="注册" :visible="visible" :confirm-loading="confirmLoading" :closable="false">
        <template slot="footer">
          <a-button key="back" @click="handleCancel">
            取消
          </a-button>
        </template>
        <p>{{ ModalText }}</p>
        <Register @getRegisterValue="getRegisterValue"></Register>
      </a-modal>
    </a-form-item>
  </a-form>
</template>
<script>
  import axios from 'axios'
  import Register from "./register.vue"
  // import register from '../components/register.vue';
  export default {
    // components: { register },
    components: {
      Register
    },
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: "normal_login" });
      var fdata = {
        loginName: "",
        password: "",
      };
      fdata.loginName = 'user';
      fdata.password = '123456';
      this.$store.commit('changePermissionsUp', fdata.loginName);
      this.$router.push("/findex");
    },
    data() {
      return {
        ModalText: '请输入账户、密码',
        visible: false,
        confirmLoading: false,
        registerVal: '',
      }
    },
    methods: {
      showRegister() {
        this.visible = true;
      },
      handleOk() {
        this.ModalText = 'The modal will be closed after two seconds';
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
        }, 2000);
      },
      handleCancel() {
        this.visible = false;
      },
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log("Received values of form: ", values);
          }
          var fdata = {
            loginName: "",
            password: "",
          };
          fdata.loginName = values["userName"];
          fdata.password = values["password"];
          axios({
            method: 'get',
            url: 'apiquerylog/login',
            data: {
              fdata
            },
            transformRequest: [
              function (data) {
                let ret = ''
                for (let it in data) {
                  ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                }
                ret = ret.substring(0, ret.lastIndexOf('&'));
                return ret
              }
            ],
            headers: {
              'Content-Type': 'application/json'
            },
          }).then((res) => {
            if (res.data.Flag == true) {
              this.$message.success('登录成功');
              window.sessionStorage.setItem("token", res.data.Token);
              this.$store.commit('changePermissionsUp', fdata.loginName);
              this.$router.push("/findex");
            }
          })
        });
      },
      getRegisterValue() {
        console.log('窗口关闭');
        this.handleCancel();
      }
    },
  };
</script>
<style>
  #components-form-demo-normal-login .login-form-forgot {
    float: right;
  }

  #components-form-demo-normal-login .login-form-button {
    width: 100%;
  }
</style>